<template>
	<view class="body-bar">
		<image src="/static/icons/QQ20250714-163513.png" mode=""
			style="width: 200rpx;height: 200rpx;margin-bottom: 80rpx;"></image>
		<view class="form-bar">
			<text
				style="font-size: 48rpx;color:#333;font-weight: 500;margin-bottom: 28rpx;line-height: 48rpx;">账号密码登录</text>
			<text
				style="font-size: 28rpx;color:#999;font-weight: 400;line-height: 28rpx;margin-bottom: 90rpx;">欢迎使用家医</text>

			<text class="title">手机号码</text>
			<view :class="{'action':nowIndex==0,'input-bar':true}" @click="nowIndex=0" style="margin-bottom: 40rpx;">
				<!-- <text
					style="font-weight: 400;font-size: 28rpx;color: #999;line-height: 88rpx;display: inline-block;">+86</text>
				<view style="height: 36rpx;width: 4rpx;background-color: #ccc;margin-left: 28rpx;"></view> -->
				<input type="text" placeholder="请输入手机号码" v-model="loginInfo.phone" />


			</view>
			<!-- <view class="input-bar">
				<text
					style="font-weight: 400;font-size: 28rpx;color: #999;line-height: 88rpx;display: inline-block;">+86</text>
				<view style="height: 36rpx;width: 4rpx;background-color: #ccc;margin-left: 28rpx;"></view>
				<input type="text" placeholder="请输入手机号码" />
			</view> -->

			<text class="title">
				密码
			</text>
			<view class="input-bar" :class="{'action':nowIndex==1,'input-bar':true}" @click="nowIndex=1">
				<!-- <text
					style="font-weight: 400;font-size: 28rpx;color: #999;line-height: 88rpx;display: inline-block;margin: 0 28rpx;">+86</text>
				<view style="height: 36rpx;width: 4rpx;background-color: #ccc;"></view> -->
				<input type="text" placeholder="请输入密码" v-model="loginInfo.password" />
			</view>

			<view class="deal-bar">

				<view style="display: flex; align-items: center;display:inline-block;">
					<checkbox-group @change="check">
						<label>
							<checkbox value="cb" color="#007aff" style="transform:scale(0.7)" />
							<text style="font-size:26rpx;color:#c9c9c9;font-weight: 400;">我已阅读并同意<text
									style="font-size:26rpx;color:#1877F2">《用户隐私政策》</text>
							</text>
						</label>

					</checkbox-group>
				</view>
				<text style="font-size: 24rpx;color: #666666;line-height:24rpx ;cursor: pointer;">忘记密码</text>
			</view>

			<button class="login-button" @click="login">登录</button>

			<view class="check-bar">
				<text @click="toWeixinLogin">微信登录</text>
				<text @click="toRegister">注册新用户</text>
			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		passwordLoginApi
	} from '../../api/login';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		useUserStore
	} from '../../store/user';

	const nowIndex = ref(2)
	onLoad((options) => {
		loginInfo.value.phone = options._id
	})

	const dealData = ref([])

	const loginInfo = ref({
		phone: '',
		password: ''
	})

	// 协议

	function check(e) {
		dealData.value = e.detail.value
	}

	const userStore = useUserStore()
	// 跳转注册
	function toRegister() {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 跳转微信登录
	function toWeixinLogin() {
		uni.navigateTo({
			url: '/pages/WeixinLogin/WeixinLogin'
		})
	}

	// 登录
	function login() {
		if (!dealData.value.length) {
			uni.showToast({
				title: '阅读并勾选协议',
				duration: 3000,
				icon: 'error'
			});
		} else {
			passwordLoginApi(loginInfo.value)
				.then(res => {
					if (res.code == 200) {
						uni.setStorageSync('user_token', res.token);
						uni.switchTab({
							url: '/pages/home/home'
						})
						uni.showToast({
							title: '登录成功',
							duration: 3000
						});
						userStore.getUserInfo()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'error'
						});
					}
				})
		}

	}
</script>

<style>
	.body-bar {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.form-bar {
		display: flex;
		flex-direction: column;
		width: calc(750rpx - 64rpx);
	}

	.title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		line-height: 28rpx;
		margin-bottom: 28rpx;
		text-align: left;
	}

	.input-bar {
		background-color: #f1f7fb;
		height: 88rpx;
		width: 670rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.input-bar input {
		height: 80rpx;
		display: block;
		border: none;
		outline: none;
		/* padding-left: 28rpx; */
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	.action {
		background-color: #fff;
		border: 1px solid #2984F8;
	}

	.deal-bar {
		width: calc(750rpx - 64rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0;
	}

	.login-button {
		width: 670rpx;
		height: 88rpx;
		background-color: #2984F8;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}

	.check-bar {
		font-size: 28rpx;
		color: #2984F8;
		display: flex;
		justify-content: space-between;
	}

	.check-bar>text {
		cursor: pointer;
	}
</style>